<template>
  <view>
    <!-- 未登录 -->
    <block v-if="userPinia.isLoginType ==0">
      <view class="u-rela">
        <image mode="widthFix" class="w-100" src="@/static/images/shop/shopbg.jpg">
        </image>
        <u-button :custom-style="indexHooks.custmStyle()" type="warning" class="u-abso"
                  style="left: 50%;top: 50%;transform: translate(-50%,-50%);" @click="toLogin">去登录</u-button>
      </view>
    </block>
    <!-- 已登录 -->
    <block v-else>
      <image mode="widthFix" src="@/static/images/shop/shopbg.jpg" class="banner">
      </image>
      <view class="head">
        <image mode="widthFix" class="logoImg" :src="userPinia.userinfo.imageUrl"></image>
        <view class="logo"></view>
        <view class="main">
          <view class="name">{{userPinia.userinfo.nickName}}</view>
          <view class="seleShop">
            <block v-if="userPinia.isLoginType===3">
              <view class="btn u-m-r-20" v-if="shopList.length>0" @click="shopShow = true">切换店铺</view>
              <view v-if="shop?.businessState" class="btn" style="background-color: #0861fd;"
                    @click="swChange">店铺营业
              </view>
              <view v-else class="btn" @click="swChange" style="background-color: red;">店铺打样</view>
            </block>
          </view>
          <view class="inner">
            <view class="items" v-if="userPinia.isLoginType===3"
                  @click="navClick('/subpackage/my/shop_information')">
              <image mode="widthFix" src="@/static/images/shop/icon3.png"></image>
              <text>编辑资料</text>
            </view>
            <!-- <navigator hover-class="none" url="/pages2/pages/shop/detail"></navigator> -->

            <!-- <navigator url="/pages2/pages/person/buisnessLocation/index" hover-class="none"></navigator> -->
            <view class="items" @click="navClick('/subpackage/my/buisnessLocation')"
                  v-if="userPinia.isLoginType==3">
              <image mode="widthFix" src="@/static/images/shop/icon2.png"></image>
              <text>商户定位</text>
            </view>
            <view class="items" bindtap="phoneShowSE" @click="showPhone = true">
              <image mode="widthFix" src="@/static/images/shop/icon1.png"></image>
              <text>{{ form.realPhone ? '更换' : '绑定' }}手机</text>
            </view>
          </view>
        </view>
      </view>
      <view class="menu">
        <navigator url="/subpackage/my/fund/index"  hover-class="none">
          <view class="items">
            <image mode="widthFix" src="@/static/images/shop/menuzj.png"></image>
            <text>资金管理</text>
          </view>
        </navigator>

        <navigator url="/subpackage/my/statistical/index" v-if="userPinia.isLoginType==3" hover-class="none">
          <view class="items">
            <!-- <image mode="widthFix" style="transform: scale(1.25);" src="/static/shop/menutj.png"></image> -->
            <image mode="widthFix" style="transform: scale(1.25);" src="@/static/images/shop/menutj.png">
            </image>
            <text>订单统计</text>
          </view>
        </navigator>

        <navigator url="/subpackage/my/waiters/index" v-if="userPinia.isLoginType==3" hover-class="none">
          <view class="items">
            <image mode="widthFix" src="@/static/images/shop/menufw.png"></image>
            <text>服务员管理</text>
          </view>
        </navigator>

        <navigator url="/subpackage/my/write/index" v-if="userPinia.isLoginType==3" hover-class="none">
          <view class="items">
            <image mode="widthFix" src="@/static/images/shop/hexiao.png"></image>
            <text class="u-p-t-6">会员核销</text>
          </view>
        </navigator>

        <view class="items"  @click="authUrl">
          <image mode="widthFix" style="transform: scale(1);" src="@/static/images/my/auth.png"></image>
          <text>实名认证</text>
        </view>

        <view class="items" @click="montAccount">
          <image mode="widthFix" style="transform: scale(1);" src="@/static/images/my/skzh.png"></image>
          <text>收款账户</text>
        </view>

        <navigator url="/subpackage/order/setting/setting" v-if="userPinia.isLoginType==3" hover-class="none">
          <view class="items">
            <image mode="widthFix"
                   src="@/static/images/my/shopSetting.png"></image>
            <text class="u-p-t-12">店铺设置</text>
          </view>
        </navigator>
        <navigator url="/subpackage/my/schedule/list" v-if="userPinia.isLoginType==4" hover-class="none">
          <view class="items">
            <image src="@/static/images/my/schedule.png" mode="wdithFix"></image>
            <text class="u-p-t-4">排班表</text>
          </view>
        </navigator>
        <navigator url="/subpackage/my/personnel/list" v-if="userPinia.isLoginType==4&&userPinia.userinfo.personPower==1" hover-class="none">
          <view class="items">
            <image mode="widthFix" src="@/static/images/my/people.png"></image>
            <text class="u-p-t-4">人员管理</text>
          </view>
        </navigator>
        <!-- <navigator url=""></navigator> -->
        <navigator url="/subpackage/my/setting/waiterSetting" v-if="userPinia.isLoginType==4" hover-class="none">
          <view class="items">
            <image src="@/static/images/my/waiterSetting.png" mode="wdithFix"></image>
            <text class="u-p-t-4">其它设置</text>
          </view>
        </navigator>


        <navigator url="/subpackage/my/setting/onPassword" v-if="userPinia.isLoginType==3" hover-class="none">
          <view class="items">
            <image mode="widthFix" style="transform: scale(1.4);"
                   src="@/static/images/my/no-permission.png"></image>
            <text class="u-p-t-12">修改密码</text>
          </view>
        </navigator>

        <navigator url="/subpackage/my/business/list" v-if="userPinia.isLoginType==3" hover-class="none">
          <view class="items">
            <image mode="widthFix" style="transform: scale(1);"
                   src="@/static/images/my/bussin.png"></image>
            <text class="u-p-t-4">业务员管理</text>
          </view>
        </navigator>

        <navigator url="/subpackage/my/member/list" v-if="userPinia.isLoginType==3" hover-class="none">
          <view class="items">
            <image mode="widthFix" style="transform: scale(1);"
                   src="@/static/images/my/member.png"></image>
            <text class="u-p-t-4">会员管理</text>
          </view>
        </navigator>



      </view>

      <!-- 商户 -->
      <block v-if="userPinia.isLoginType ==3">
        <view class="day">
          <viwe class="items">
            <view class="label">今日订单量</view>
            <view class="value">{{shopData?.orderCount}}<text class="u-font-xs u-m-l-4">笔</text></view>
          </viwe>
          <viwe class="items">
            <view class="label">今日订单总额</view>
            <!-- <view class="value">7500<text style="font-size:32upx">.00</text></view> -->
            <view class="value">{{shopData?.orderEarnings}}<text class="u-font-xs u-m-l-4">元</text></view>

          </viwe>
        </view>

        <view class="charts-box" style="margin-top: 32upx;">

          <view class="titleCell">
            <text>7日订单统计</text>
          </view>
          <qiunDataCharts class="charts" canvas2d="true" canvasId='aaaa1' height="100%" type="line" :opts="opts" :chartData="chartData" />
        </view>
      </block>

      <!-- 服务员 -->
      <block v-if="userPinia.isLoginType ==4">
        <view class="day">
          <viwe class="items">
            <view class="label">待处理订单数</view>
            <view class="value">{{shopData?.wOrderCount}}<text class="u-font-xs u-m-l-4">笔</text></view>
          </viwe>
          <viwe class="items">
            <view class="label">已完成订单数</view>
            <!-- <view class="value">7500<text style="font-size:32rpx">.00</text></view> -->
            <view class="value">{{shopData?.fOrderCount}}<text class="u-font-xs u-m-l-4">笔</text></view>
          </viwe>
        </view>
      </block>
      <view class="ouLogin" @click="outLogin">退出登录</view>

    </block>

    <!-- 店铺列表 -->
    <u-popup v-model="shopShow" border-radius="28" mode="center" @open="getShopList">
      <view class="Model">
        <view class="title">选择店铺</view>
        <view class="wrap">
          <view @click="seleShop(item,index)" class="items u-border" v-for="(item,index) in shopList"
                :key="index">
            <image mode="widthFix" :src="item.value"></image>
            <view class="u-font-sm u-line-1">{{item.name}}</view>
          </view>
        </view>
      </view>
    </u-popup>

    <!-- 绑定手机号 -->
    <u-popup v-model="showPhone" border-radius="28" mode="center" @open="getuserphone">
      <view class="Modelphone">
        <view class="title">{{ form.realPhone ? '更换' : '绑定' }}手机号</view>
        <view class="u-p-l-36 u-p-r-36 u-p-b-36">
          <u-form :model="form" ref="formEl">
            <u-form-item>
              <view class="u-flex">
                <image class="u-m-r-18" mode="widthFix" src="@/static/images/shop/ph1.png"
                       style="width: 36rpx;height: 80rpx;"></image>
                <u-input  type="number" v-model="form.phone" class="u-flex-1"
                         :placeholder="form.realPhone ? form.realPhone : '请输入手机号'"></u-input>
              </view>
            </u-form-item>
            <u-form-item>
              <view class="u-flex">
                <image class="u-m-r-15" mode="widthFix" src="@/static/images/shop/ps1.png"
                       style="width: 40rpx;height: 80rpx;"></image>
                <u-input v-model="form.code" class="u-flex-1" placeholder="请输入手机验证码"></u-input>
              </view>
              <template #right>
                <u-button type="warning" size="mini" plain @click="getCode">{{tips}}</u-button>
              </template>
            </u-form-item>
          </u-form>

          <view class="u-p-b-26"></view>

          <view v-if="isPhone" class="u-font-xs color-gary-xs u-text-center">注:您已绑定此手机号，输入新手机号可更换绑定</view>
          <view class="u-m-l-30 u-m-r-30 u-m-t-15">
            <u-button type="warning" @click="setPhone">确定</u-button>
          </view>
        </view>
      </view>
    </u-popup>

    <tarBar></tarBar>

    <!-- 倒计时 -->
    <u-verification-code :seconds="seconds" ref="uCode1" @change="codeChange"></u-verification-code>

  </view>
</template>

<script setup lang="ts">
import { reactive, ref, watch } from "vue";
import shopApi from '@/api/shop';
import userApi from '@/api/user';
import * as indexHooks from '@/hooks/index';
import userSotre from '@/store/user';
import shopHooks from '@/hooks/shop';
import qiunDataCharts from '../../plugins/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'

import { onShow, onLoad } from '@dcloudio/uni-app'

const formEl = ref(null)
const userPinia = userSotre()
const isPhone = ref(false)

const seconds = ref(60)
const tips = ref('')
const uCode1 = ref(null)
const roleList = ref([])


const form = reactive({
  phone: '',
  code: '',
  realPhone: ''
})

const leftIconStyle = reactive({
  width: '15upx',
  height: '23upx'
})

const shop = reactive({

})
const chartData = reactive({

})

const shopData = reactive({

})

const showPhone = ref(false)

const opts = reactive(
    {
      color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
      padding: [15, 10, 35, 15],
      enableScroll: false,
      legend: {
        lineHeight: 13,
        fontSize: 13
      },
      xAxis: {
        disableGrid: true
      },
      yAxis: {
        gridType: "dash",
        dashLength: 2
      },
      extra: {
        line: {
          type: "straight",
          width: 2,
          activeType: "hollow"
        }
      }
    }
)

const loading = ref(false)

const controlStatus = ref(false)

const shopList = ref([])
const shopShow = ref(false)

const shopTips = ref<boolean>(false)
const toLogin = () => {
  uni.reLaunch({
    url: '/subpackage/my/login/login'
  })
}

const navClick = (url : string) => {
  uni.navigateTo({
    url
  })
}

const codeChange = (text : string) => {
  tips.value = text
}

const outLogin = () => {//退出登录
  uni.showLoading({
    title: '加载中...'
  })
  userApi.outLogin({
    openId: uni.getStorageSync('openId')
  }).then(res => {
    userPinia.outLogin()
    uni.showToast({
      title: '已退出',
      success: () => {
        let time = setTimeout(() => {
          toLogin()
          clearTimeout(time)
        }, 1000)
      }
    })
  }).finally(() => {
    uni.hideLoading()
  })
}

const swChange = () => {//打样&营业
  uni.showModal({
    title: '提示',
    content: shop.businessState ? '是否打样' : '是否开启营业',
    success: (res) => {
      if (res.confirm) {
        loading.value = true
        shopApi.getShopStatus({
          id: userPinia.shopId,
          state: shop?.businessState ? 2 : 1
        }).then(res => {
          loading.value = false;
          shop.businessState = !shop.businessState;
        })

      } else if (res.cancel) {

      }
    }
  })
}

const seleShop = (item, index) => {//切换店铺
  let userinfo = userPinia.userinfo
  userinfo.nickName = item.name
  userPinia.$patch({
    shopId: item.id,
    allowMonthSettle:item.allowMonthSettle,
    workOffWay:item.workOffWay,
    takeOrdersWay:item.takeOrdersWay,
    userinfo
  });
  getsventSer(() => {
    shopShow.value = false

  })
  getsventSerOne()
}

function getsventSerOne() {
  shopApi.getShopStateData({
    type: 1
  }).then(res => {
    Object.assign(shopData, {
      orderCount: res.data.orderCount,
      orderEarnings: res.data.orderEarnings,
      wOrderCount: res.data.wOrderCount,
      fOrderCount: res.data.fOrderCount
    })
  })
}

const getsventSer = (callback) => {//店铺数据
  //模拟从服务器获取数据时的延时
  shopApi.getShopStateData({
    type: 2
  }).then(res => {


    let obj = {
      categories: [],
      series: []
    }

    res.data.statistics.map(item => {
      obj.categories.push(item.time)
    })
    obj.series.push({
      name: '订单数量',
      data: res.data.statistics.map(item => item.count)
    })
    obj.series.push({
      name: '订单金额',
      data: res.data.statistics.map(item => item.earnings)
    })
    Object.assign(chartData, JSON.parse(JSON.stringify(obj)))
    if (callback) {
      callback()
    }

  })
}

const getuserphone = () => {
  userApi.getUserPhone().then(res => {
    form.realPhone = res.data
    if (res.data) {
      isPhone.value = true
    }
  })
}

const setPhone = () => {
  if (form.phone == "") {
    return uni.showToast({
      title: '请输入手机号',
      icon: 'none'
    })
  }
  if (form.code == "") {
    return uni.showToast({
      title: '请输入验证码',
      icon: 'none'
    })
  }
  userApi.setUserPhone(form).then(res => {
    uni.showToast({
      title: res.msg,
      success: () => {
        showPhone.value = false
      }
    })
  })
}

function authUrl() {
  userApi.accinfo().then(res => {
    if (uni.$u.test.isEmpty(res.data)) {//未认证

      switch (userPinia.isLoginType) {
        case 3:
          uni.$u.route({
            url: '/subpackage/my/fund/authSele',
          })
          break;

        case 4:
          uni.$u.route({
            url: '/subpackage/my/fund/userAuth',
            params: {
              type: 3
            }
          })
          break;
      }
    } else {//已认证
      switch (res.data.openState) {
        case 1://審核中
          uni.showModal({
            title: '提示',
            content: '信息审核中请等待预计 1~3 个工作日',
            showCancel: false,
          })
          break;
        case 2://开户成功
          switch (userPinia.isLoginType) {
            case 3:
              uni.$u.route({
                url: '/subpackage/my/fund/userAuth',
                params: {
                  type: res.data.userType,
                  update: true
                }
              })
            case 4:
              uni.$u.route({
                url: '/subpackage/my/fund/userAuth',
                params: {
                  type: 3,
                  update: true
                }
              })
              break;
          }
          break;

        default:

          const params = {
            type:res.data.userType,
            update:true
          }
          uni.$u.route({
            url: '/subpackage/my/fund/userAuth',
            params,
          })
      }
    }
  })

}

const getCode = () => {
  if (form.phone == "") {
    return uni.showToast({
      title: '请输入手机号',
      icon: 'none'
    })
  } else {

    if (uCode1.value.canGetCode) {

      userApi.msgSms({
        mobile: form.phone,
        smsType: 103,
        useType: 1
      }).then(res => {
        uni.showToast({
          title: '已发送',
          icon: 'none'
        })
        uCode1.value.start()
      })
    }
  }
}

const getShopList = () => {
  shopApi.getShopAllList().then(res => {
    shopList.value = res.data
  })
}

//收款账户
function montAccount(){
  uni.navigateTo({
    url:'/subpackage/my/fund/bankbind'
  })
}

onShow(() => {
  if (userPinia.isLoginType != 0) {
    if (userPinia.isLoginType == 3) {
      shopHooks.getShop().then(res => {
        Object.assign(shop, res)
      })

    }
    userPinia.setRoleList()
    userApi.getRoleList().then(res => {
      roleList.value = res.data
    })
    getsventSer()
    getsventSerOne()
    getuserphone()
    getShopList()
  }
})
</script>

<style lang="scss" scoped>
.Modelphone {
  width: 80vw;
  min-height: 30vh;
  background-color: white;

  .title {
    color: #666666;
    font-size: 35upx;
    line-height: 4em;
    text-align: center;
    text-indent: 1upx;
    font-weight: 600;
  }
}

.banner {
  width: 100%;
  height: 350upx;
  object-fit: cover;
  position: relative;
  z-index: -1;
}

.head {
  /* background-color: white; */
  position: relative;
  /* padding-top: 90upx; */
  margin-top: -130upx;
}

.head .logo {
  position: relative;
  display: flex;
  justify-content: center;
  overflow: hidden;
  height: 90upx;
}

.head .logo::before {
  content: '';
  top: 0upx;
  position: absolute;
  width: 390vw;
  height: 390vh;
  background-color: white;
  border-radius: 48%;
  /* z-index: 1; */
}

.head .logoImg {
  display: block;
  width: 140upx;
  height: 140upx;
  position: absolute;
  left: 50%;
  top: -22%;
  z-index: 3;
  border-radius: 50%;
  border: 2upx solid white;
  transform: translateX(-50%);
}

.head .main {
  background-color: #fff;
  padding-bottom: 30upx;
}

.head .main .name {
  text-align: center;
  font-weight: 800;
  font-size: 35upx;
}

.head .main .seleShop {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20upx;
}

.head .main .seleShop .btn {
  font-size: 28upx;
  color: white;
  background-color: #ffc300;
  line-height: 2.1em;
  padding: 0 40upx;
  border-radius: 28upx;
}

.head .main .inner {
  margin-top: 26upx;
  /* display: grid;
    grid-template-columns: repeat(3,1fr); */
  display: flex;
  align-items: center;
}

.head .main .inner .items {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.head .main .inner .items image {
  width: 37upx;
  height: 37upx;
}

.head .main .inner .items text {
  font-size: 28upx;
  color: #555555;
  padding-top: 12upx;
}

.menu {
  margin-top: 20upx;
  background-color: white;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  row-gap: 22upx;
  padding: 30upx 0;
}

.menu .items {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.menu .items image {
  width: 46upx;
  height: 46upx;
}

.menu .items text {
  font-size: 28upx;
  color: #666666;
  margin-top: 12upx;
}

.titleCell {
  position: relative;
  display: flex;
  align-items: center;
  height: 80upx;
  padding-left: 45upx;
}

.titleCell::before {
  content: '';
  position: absolute;
  left: 22upx;
  width: 10upx;
  height: 35upx;
  background-color: #ffc300;
}

.titleCell text {
  font-size: 28upx;
}

.day {
  padding: 48upx;
  background-color: white;
  margin-top: 22upx;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 40upx;
}

.day .items {
  position: relative;
  border-radius: 18upx;
  box-shadow: 4upx 8upx 18upx rgba(0, 0, 0, .15);
  box-sizing: border-box;
  padding: 23upx 0 28upx 50upx;
  position: relative;
  overflow: hidden;
}

.day .items::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 26upx;
  height: 100%;
}

.day .items:first-child::before {
  background-color: #ffc300;
}

.day .items:last-child::before {

  background-color: #2c7de3;
}

.day .items .label {
  color: #75747d;
  font-size: 26upx;
}

.day .items .value {
  color: #75747d;
  font-size: 42upx;
}

.charts-box {
  width: 100%;
  height: 300px;
  background-color: white;

  .charts {
    width: 100%;
    height: calc(300px - 80rpx);
  }
}


.ouLogin {
  width: 427upx;
  height: 70upx;
  background-color: #ffc300;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 14upx;
  color: #fefbf7;
  margin: 72upx auto;
  box-shadow: 2upx 6upx 12upx rgba(0, 0, 0, .15);
}

.shopModel {
  width: 75vw;
  background-color: white;
}

.shopModel .title {
  font-size: 42upx;
  font-weight: 700;
  color: #ffc300;
  text-align: center;
  line-height: 2.6em;
}

.shopModel scroll-view {
  max-height: 60vh;
  min-height: 40vh;
  padding: 30upx 0;
  box-sizing: border-box;
}

.shopModel .shoplist {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: 28upx;
}

.shopModel scroll-view .items {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.shopModel scroll-view .items image {
  width: 100upx;
  height: 100upx;
}

.shopModel scroll-view .items text {
  font-size: 26upx;
  text-align: center;
  margin-top: 12upx;
  color: #75747d;
}

.phoneModel {
  width: 600upx;
  min-height: 533upx;
  overflow: hidden;

}

.phoneModel .title {
  position: relative;
  height: 130upx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.phoneModel .title text {
  font-size: 32upx;
  color: #666666;
  letter-spacing: 1upx;
  font-weight: 600;
}

.phoneModel .form {
  padding: 0 48upx;
}

.phoneModel .form .form-item {
  display: flex;
  align-items: center;
}

.phoneModel .form .form-item:first-child {
  border-bottom: 1upx solid #dadada;
}

.phoneModel .form input {
  height: 130upx;
  font-size: 24upx;
  color: #999999;
  flex: 1;
  box-sizing: border-box;
  padding: 0 35upx;
}

.phoneModel .form .bindBtn {
  width: 460upx;
  height: 80upx;
  background-color: #ffc300;
  font-size: 30upx;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10upx;
  margin: 20upx auto 30upx;
}

.tips {
  font-size: 20upx;
  text-align: center;
  color: #ccc;
}


/* .phoneModel .form .form-item image{
  width: 30upx;
  height: 46upx;
} */


.ouLogin {
  width: 427upx;
  height: 70upx;
  background-color: #ffc300;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 14upx;
  color: #fefbf7;
  margin: 84upx auto;
  box-shadow: 2upx 6upx 12upx rgba(0, 0, 0, .15);
}


.Model {
  min-height: 50vh;
  width: 80vw;
  padding: 30upx 35upx;

  .title {
    font-size: 42upx;
    font-weight: 700;
    color: #ffc300;
    text-align: center;
    padding-bottom: 26upx;
  }

  .wrap {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    .items {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 50upx 0;

      image {
        width: 75%;
        height: 100upx;
        object-fit: cover;
      }
    }
  }

}
</style>
